<template>
  <div class="app-container">
    <div class="topform">
      <el-form ref="QueryForm" :model="QueryForm" @submit.native.prevent>
        <el-form-item label="客户姓名：" label-width="100px" style="width: 300px;float: left">
          <el-input
            placeholder="请输入客户姓名"
            v-model="QueryForm.user_name"
            clearable
            autocomplete="off"/>
        </el-form-item>
        <el-form-item label="提交人：" label-width="80px" style="width: 250px;float: left">
          <el-select clearable v-model="QueryForm.technology_uid" placeholder="请选择提交人">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="item in technologys" :label="item.u_name" :value="item.uid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审批类型：" label-width="100px" style="width: 250px;float: left">
          <el-select clearable v-model="QueryForm.approval_model">
            <el-option label="全部" value=""></el-option>
            <el-option label="在保" :value="0"></el-option>
            <el-option label="超保" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审批状态：" label-width="100px" style="width: 250px;float: left">
          <el-select clearable v-model="QueryForm.repair_handle_state" placeholder="请选择审批状态">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="item in states" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提交时间：" label-width="100px" style="width: 550px;float: left">
          <el-date-picker
            style="float: left;width: 45%"
            v-model="QueryForm.addtime_sdt"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            clearable
            type="datetime"
            placeholder="请选择开始时间">
          </el-date-picker>
          <div style="float: left;margin: 0 10px">至</div>
          <el-date-picker
            style="float: left;width: 45%"
            v-model="QueryForm.addtime_edt"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            clearable
            type="datetime"
            placeholder="请选择结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="审批时间：" label-width="100px" style="width: 550px;float: left">
          <el-date-picker
            style="float: left;width: 45%"
            v-model="QueryForm.repair_approval_time_sdt"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            clearable
            type="datetime"
            placeholder="请选择开始时间">
          </el-date-picker>
          <div style="float: left;margin: 0 10px">至</div>
          <el-date-picker
            style="float: left;width: 45%"
            v-model="QueryForm.repair_approval_time_edt"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            clearable
            type="datetime"
            placeholder="请选择结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="寄件状态：" label-width="100px" style="width: 250px;float: left">
          <el-select clearable v-model="QueryForm.express_state">
            <el-option label="全部" value=""></el-option>
            <el-option label="无寄件" :value="0"></el-option>
            <el-option label="已寄出" :value="1"></el-option>
            <el-option label="未寄出" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="寄件时间：" label-width="100px" style="width: 550px;float: left">
          <el-date-picker
            style="float: left;width: 45%"
            v-model="QueryForm.express_time_sdt"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            clearable
            type="datetime"
            placeholder="请选择开始时间">
          </el-date-picker>
          <div style="float: left;margin: 0 10px">至</div>
          <el-date-picker
            style="float: left;width: 45%"
            v-model="QueryForm.express_time_edt"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            clearable
            type="datetime"
            placeholder="请选择结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="返件超时：" label-width="100px" style="width: 250px;float: left">
          <el-select clearable v-model="QueryForm.express_time_out_type">
            <el-option label="全部" value=""></el-option>
            <el-option label="小于等于1天" :value="1"></el-option>
            <el-option label="大于1天小于等于7天" :value="2"></el-option>
            <el-option label="大于7天小于等于15天" :value="3"></el-option>
            <el-option label="大于15天" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-button native-type="submit" type="primary" style="margin-left: 10px" icon="el-icon-search"
                   @click="Query(true)">搜索
        </el-button>
        <el-button native-type="submit" type="primary" @click="exceldown()">导出</el-button>
      </el-form>
    </div>
    <el-table
      header-cell-class-name="tableheader"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      v-loading="Loading"
      :data="list"
      border
      fit
      element-loading-text="加载中···"
      highlight-current-row
      class="lefttable">
      <el-table-column
        type="index"
        width="40">
      </el-table-column>
      <el-table-column align="center" label="报修日期">
        <template slot-scope="scope">
          {{ scope.row.addtime }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="提交人">
        <template slot-scope="scope">
          {{ scope.row.technology_uname }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="提交日期">
        <template slot-scope="scope">
          {{ scope.row.repair_approval_addtime }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="客户姓名">
        <template slot-scope="scope">
          {{ scope.row.user_name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="质保开始时间">
        <template slot-scope="scope">
          {{ scope.row.mch_assurance_sdt }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="审批人">
        <template slot-scope="scope">
          {{ scope.row.approval_name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="审批类型">
        <template slot-scope="scope">
          <span v-if="scope.row.approval_model===0">在保</span>
          <span v-if="scope.row.approval_model===1">超保</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="审批状态">
        <template slot-scope="scope">
          <span style="color: #999999" v-if="scope.row.repair_handle_state===2">{{
              scope.row.repair_handle_state_str
            }}</span>
          <span style="color: #00b003" v-if="scope.row.repair_handle_state===3">{{
              scope.row.repair_handle_state_str
            }}</span>
          <span style="color: #ff0000" v-if="scope.row.repair_handle_state===4">{{
              scope.row.repair_handle_state_str
            }}</span>
          <span style="color: #494949" v-if="scope.row.repair_handle_state===5">{{
              scope.row.repair_handle_state_str
            }}</span>
          <span style="color: #00b003" v-if="scope.row.repair_handle_state===6">{{
              scope.row.repair_handle_state_str
            }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="审批时间">
        <template slot-scope="scope">
          {{ scope.row.repair_approval_time }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="审批金额">
        <template slot-scope="scope">
          {{ scope.row.approval_price }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="快递模式">
        <template slot-scope="scope">
          {{ scope.row.express_model }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="寄件单号">
        <template slot-scope="scope">
          {{ scope.row.express_no }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="寄件状态">
        <template slot-scope="scope">
          {{ scope.row.express_state_str }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="寄件时间">
        <template slot-scope="scope">
          {{ scope.row.express_time }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="返件超时">
        <template slot-scope="scope">
          {{ scope.row.return_out_des }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" plain @click.stop="details(scope.row)">报修详情</el-button>
          <el-button type="primary" size="mini" plain @click.stop="processing(scope.row)">审批详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        style="text-align: center"
        layout="prev, pager, next"
        small
        :current-page="QueryForm.page"
        :page-size="QueryForm.pagesize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <el-dialog :close-on-click-modal="false" title="报修处理" :visible.sync="detailsdialog" width="65%">
      <detailsdiv :repair_id="repair_id" :mch_id="mch_id" :isreadonly="true"></detailsdiv>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" title="处理审批" :visible.sync="processingdialog" width="35%">
      <el-form ref="processingdialogform" :model="processingdialogform"
               label-width="100px">
        <el-form-item label="提交人：">
          <el-input
            v-model="technology_uname"
            disabled
            clearable
            autocomplete="off"/>
        </el-form-item>
        <el-form-item label="审批金额：">
          <el-input style="width: 20%;float: left"
                    v-model="approval_price"
                    disabled
                    clearable
                    autocomplete="off"/>
          <el-form-item label="快递模式：" style="width: 40%;float: left">
            <el-input
              v-model="express_model"
              disabled
              clearable
              autocomplete="off"/>
          </el-form-item>
          <el-form-item label="运费：" style="width: 40%;float: left">
            <el-input
              v-model="freight"
              disabled
              clearable
              autocomplete="off"/>
          </el-form-item>
        </el-form-item>
        <el-form-item label="审批内容：">
          <el-input
            v-model="repair_approval_des"
            disabled
            clearable
            autocomplete="off"/>
        </el-form-item>
        <el-form-item label="审批状态：" prop="state">
          <el-select clearable disabled v-model="processingdialogform.state" placeholder="请选择审批状态">
            <el-option v-for="item in states" :label="item.name" :value="item.id"></el-option>
            <el-option label="已完成" :value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审批说明：">
          <el-input
            disabled
            v-model="processingdialogform.approval_repair_handle_result"
            type="textarea"
            clearable
            autocomplete="off"/>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :append-to-body="true" :visible.sync="dialogurl">
      <div style="text-align: center">
        <img style="max-width: 500px;max-height: 500px" :src="dialogImageUrl" alt="">
      </div>
    </el-dialog>
  </div>
</template>

<script type="es6">
import detailsdiv from '../../components/detailsdialog';
import Cookies from "js-cookie";

export default {
  components: {
    'detailsdiv': detailsdiv
  },
  data() {
    return {
      QueryForm: {
        user_name: '',
        technology_uid: '',
        repair_handle_state: '',
        approval_model: '',
        addtime_sdt: '',
        addtime_edt: '',
        repair_approval_time_sdt: '',
        repair_approval_time_edt: '',
        reback_state: '',
        express_state: '',
        express_time_sdt: '',
        express_time_edt: '',
        express_time_out_type: '',
        isPage: true,
        page: 1,
        pagesize: 16,
      },
      propstype: {
        value: "label",
        label: "label",
        children: "children"
      },
      processingdialogform: {
        state: '',
        approval_repair_handle_result: '',
      },
      typedata: [],
      technologys: [],
      customers: [],
      states: [],
      list: [],
      total: 0,
      detailsdialog: false,
      processingdialog: false,
      dialogurl: false,
      Loading: true,
      dialogImageUrl: '',
      technology_uname: '',
      approval_price: '',
      express_model: '',
      freight: '',
      repair_approval_des: '',
      repair_id: '',
      mch_id: '',
      sn: '',
      repair_content_pic: '',
      repair_express_no: '',
    };
  },
  created() {
    this.Query();
    this.gettechnology();
    this.getstate();
  },
  methods: {
    Query(isquery) {
      if (isquery === true) {
        this.QueryForm.page = 1
      }
      this.$post(this.$api + '/repair/get_approval_pagelist', this.QueryForm)
        .then((res) => {
          this.Loading = false;
          if (res.code === 0) {
            this.list = res.rows;
            for (var i in this.list) {
              if (this.list[i].mch_assurance_sdt !== null) {
                this.list[i].mch_assurance_sdt = this.list[i].mch_assurance_sdt.substring(0, 10)
              }
              if (this.list[i].addtime !== null) {
                this.list[i].addtime = this.list[i].addtime.substring(0, 10)
              }
              if (this.list[i].repair_approval_addtime !== null) {
                this.list[i].repair_approval_addtime = this.list[i].repair_approval_addtime.substring(0, 10)
              }
              if (this.list[i].repair_approval_time !== null) {
                this.list[i].repair_approval_time = this.list[i].repair_approval_time.substring(0, 10)
              }
            }
            this.total = res.total;
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },
    exceldown() {
      this.$downloadpost(this.$api + '/repair/down_approval_pagelist_for_excel', this.QueryForm, true)
    },
    gettechnology() {
      this.$get(this.$api + '/repair/get_customer_userlist', {
        'lv': 'technology',
      })
        .then((res) => {
          if (res.code === 0) {
            this.technologys = res.data
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },
    getstate() {
      this.$post(this.$api + '/RK/enum_list', ['apply_state'])
        .then((res) => {
          if (res.code === 0) {
            this.states = res.data[0].data
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },
    details(item) {
      this.detailsdialog = true;
      this.repair_id = item.repair_id
      this.mch_id = item.mch_id
    },
    processing(item) {
      this.processingdialog = true;
      this.technology_uname = item.technology_uname;
      this.approval_price = item.approval_price;
      this.express_model = item.express_model;
      this.freight = item.freight;
      this.repair_approval_des = item.repair_approval_des;
      this.repair_id = item.repair_id;
      this.mch_id = item.mch_id
      this.processingdialogform.state = item.repair_handle_state;
      this.processingdialogform.approval_repair_handle_result = item.approval_repair_handle_result;
    },
    handleSizeChange(v) {
      this.QueryForm.pagesize = v;
      this.Query();
    },
    handleCurrentChange(v) {
      this.QueryForm.page = v;
      this.Query();
    },
    opendialogurl(item) {
      this.dialogurl = true;
      this.dialogImageUrl = item
    },
  }
};
</script>
